<template>
  <div class="login">
    <Row class="inner">
      <Col :md="10" :xs="0">
        <h1>欢迎登陆未来社区</h1>
        <h3>谈论话题，分享生活</h3>
      </Col>
      <Col :md="14" :xs="24">
        <Row>
          <Col :md="7" :lg="5" :xs="0"></Col>
          <Col :xs="24" :md="10" class="user-login">
            <Form ref="userInfo" :model="userInfo" :rules="isInfo">
              <Row justify="center">
                <Col>
                  <h2>欢迎使用</h2>
                </Col>
              </Row>
              <Row justify="center">
                <Col :md="22" :xs="20" :lg="20">
                  <FormItem prop="phone">
                    <Input
                      v-model="userInfo.phone"
                      placeholder="请输入手机号"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row justify="center">
                <Col :md="22" :xs="20" :lg="20">
                  <FormItem prop="password">
                    <Input
                      v-model="userInfo.password"
                      placeholder="请输入密码"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row justify="center">
                <Col :md="22" :xs="20" :lg="20">
                  <FormItem>
                    <Button
                      long
                      type="primary"
                      @click="handleSubmit('userInfo')"
                      >登陆</Button
                    >
                  </FormItem>
                </Col>
              </Row>
              <Row justify="center">
                <Col :md="24" :xs="24" :lg="20" class="link">
                  <router-link to="/register"
                    >还没有账号？现在去注册</router-link
                  >
                </Col>
              </Row>
            </Form></Col
          >
          <Col :md="7"></Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        phone: "",
        code: "",
        password: "",
        password2: "",
      },
      isInfo: {
        phone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不能小于6位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      //  console.log(this.$refs,name);
      this.$refs[name].validate((valid) => {
        if (valid) {
        this.$userApi.login({
          data:this.userInfo
        }).then((res)=>{
          if(res.ret === 200){
           this.$router.push("/home")
          }else{
             this.$Message.error(res.msg.error||res.msg.phone);
          }
        }

        )
      
        } else {
          this.$Message.error("登陆失败!");
        }
      });
    },
    isTrue() {
      return this.userInfo.password === this.userInfo.password2;
    },
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("http://www.zjtxqq.com/img/bjdt.png");
  background-size: cover;
  .inner {
    padding-top: 27vh;
    h1 {
      margin-top: 100px;
    }
    .user-login {
      background: rgba(236, 235, 235, 0.5);
      border-radius: 5px;
      h2 {
        padding: 30px;
      }
      .link {
        text-align: right;
        margin-top: 10px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>